<template>
  <OADialog title="处理考勤" v-model="dialogVisible" @submit="onSubmitAbsent">
    <el-form :model="absentForm" :rules="rules" ref="absentFormRef" label-width="100px">
      <el-form-item label="结果" prop="status">
        <el-radio-group v-model="absentForm.status" class="ml-4">
          <el-radio :value="2">通过</el-radio>
          <el-radio :value="3">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="理由" prop="response_content">
        <el-input type="textarea" v-model="absentForm.response_content" autocomplete="off" />
      </el-form-item>
    </el-form>
  </OADialog>
  <OAMain title="下属考勤">
    <el-card>
      <el-table :data="absents">
        <el-table-column prop="title" label="标题" />
        <el-table-column label="发起者">
          <template #default="scope">
            {{ '[' + scope.row.requester.department.name + ']' + scope.row.requester.realname }}
          </template>
        </el-table-column>
        <el-table-column prop="absent_type.name" label="类型" />
        <el-table-column prop="request_content" label="原因" />
        <el-table-column label="发起时间">
          <template #default="scope">
            {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column prop="start_date" label="开始日期" />
        <el-table-column prop="end_date" label="结束日期" />
        <el-table-column prop="responder.realname" label="审核领导" />
        <el-table-column prop="response_content" label="反馈意见" />
        <el-table-column label="审核状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.status == 1">审核中</el-tag>
            <el-tag type="success" v-else-if="scope.row.status == 2">已通过</el-tag>
            <el-tag type="danger" v-else>已拒绝</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="处理">
          <template #default="scope">
            <el-button v-if="scope.row.status == 1" @click="onShowDialog(scope.$index)" type="primary" icon="EditPen" />
            <el-button v-else disabled type="default">已处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total"
          v-model:current-page="pagination.page" :page-size="10"></el-pagination> -->
        <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
      </template>
    </el-card>
  </OAMain>
</template>

<script setup name="myabsent">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import OAPageHeader from '@/components/OAPageHeader.vue'
import absentHttp from '@/api/absentHttp'
import { ElMessage } from 'element-plus'
import timeFormatter from "@/utils/timeFormatter"
import OAMain from '@/components/OAMain.vue'
import OAPagination from '@/components/OAPagination.vue'
import OADialog from '@/components/OADialog.vue'

// 考勤信息
let absents = ref([])

// 分页数据
let pagination = reactive({
  total: 0,
  page: 1
})

let dialogVisible = ref(false)
let absentForm = reactive({
  status: 2,
  response_content: ""
})
let rules = reactive({
  status: [{ required: true, message: '请选择处理结果！', trigger: 'change' }],
  response_content: [{ required: true, message: '请输入理由！', trigger: "blur" }]
})
let absentFormRef = ref()
let handleIndex = null

const onShowDialog = (index) => {
  absentForm.status = 2
  absentForm.response_content = ""
  dialogVisible.value = true
  handleIndex = index
}

const onSubmitAbsent = () => {
  absentFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      try {
        // 隐藏对话框
        dialogVisible.value = false
        const absent = absents.value[handleIndex]
        const data = await absentHttp.handleSubAbsent(absent.id, absentForm.status, absentForm.response_content)
        // console.log(data);
        absents.value.splice(handleIndex, 1, data) // 将修改后的数据进行替换
        ElMessage.success('下属考勤处理成功！')
      } catch (detail) {
        ElMessage.error(detail)
      }
    }
  })
}

onMounted(async () => {
  try {
    let data = await absentHttp.getSubAbsents()
    pagination.total = data.count
    absents.value = data.results
  } catch (detail) {
    ElMessage.error(detail)
  }
})

</script>

<style scoped></style>